import React, { Component } from "react";

// 状态提升就是将几个兄弟组件的公用的值，提到他们公共的父组件
// 这里就用到了子传父和父传子

import Child1 from "./Child1";
import Child2 from "./Child2";

// 可以在父组件的子组件标签上面添加自定义事件
// 在子组件的里面直接调用this.props.xxx来触发父组件的事件
// 在这个触发的时候，可以传递参数，来做到子传父

class App extends Component {
  state = {
    count: null,
  };

  fn = (n) => {
    console.log(n);
    this.setState({
      count: n,
    });
  };

  render() {
    return (
      <>
        <h2>状态提升 - {this.state.count}</h2>
        <Child1 onAbc={this.fn} />
        <Child2 count={this.state.count} />
      </>
    );
  }
}

export default App;
